<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>document.getElementsByTagName("html")[0].className += " js";</script>
  <link rel="stylesheet" href="../assets/css/rotating_nav_anim.css" />
  <title>3D Rotating Navigation</title>
</head>
<body>
	<header class="cd-header container flex justify-between items-center">

    
    <a href="#cd-3d-nav" class="cd-header__nav-trigger" aria-label="Toggle menu">
      <span aria-hidden="true"></span>
    </a>
	</header>
	
	<main class="cd-main">
    <!-- all your content here -->
    <div class="container max-width-xs">
      <div class="text-component text-center margin-top-xxl">
        <h1 class="text-xl">3D Rotating Navigation</h1>
      </div>
    </div>
	</main>
	
	<nav class="cd-3d-nav js-cd-3d-nav" id="cd-3d-nav">
		<ul class="cd-3d-nav__list">
			<li class="cd-3d-nav__item cd-3d-nav__item--selected">
				<a href="#0">
          <svg aria-hidden="true" class="icon icon--md"><g stroke="currentColor" stroke-width="2" fill="none"><path d="M12,6.6c1.2-0.5,2.6-0.8,4-0.8 c5.6,0,10.2,4.6,10.2,10.2"></path><path d="M5.8,16c0-1.4,0.3-2.8,0.8-4"></path><line x1="13.9" y1="13.9" x2="8.4" y2="8.4"></line> <circle cx="16" cy="16" r="15"></circle><circle cx="16" cy="16" r="3"></circle></svg>
          <span>Dashboard</span>
        </a>
			</li>

			<li class="cd-3d-nav__item">
				<a href="#0">
          <svg aria-hidden="true" class="icon icon--md"><g stroke="currentColor" stroke-width="2" fill="none"><polyline points=" 11,7 11,2 21,2 21,7 "></polyline> <polyline points="12,23 1,23 1,7 31,7 31,23 20,23 "></polyline> <polyline points="30,26 30,30 2,30 2,26 "></polyline><rect x="12" y="20" width="8" height="6"></rect></svg>
          <span>Projects</span>
        </a>
			</li>

			<li class="cd-3d-nav__item">
				<a href="#0">
          <svg aria-hidden="true" class="icon icon--md"><g stroke="currentColor" stroke-width="2" fill="none"><polyline points="14.858,21.142 22,14 31,22"></polyline><polyline points="1,25 10,17 18.501,24.249 "></polyline> <rect x="1" y="3" width="30" height="26"></rect><circle cx="14.5" cy="10.5" r="2.5"></circle></svg>
          <span>Images</span>
        </a>
			</li>

			<li class="cd-3d-nav__item">
				<a href="#0">
          <svg aria-hidden="true" class="icon icon--md"><g stroke="currentColor" stroke-width="2" fill="none"><rect x="2" y="2" width="28" height="28"></rect><line x1="9" y1="18" x2="9" y2="6"></line><line x1="9" y1="26" x2="9" y2="22"></line><line x1="12" y1="22" x2="6" y2="22"></line><line x1="23" y1="18" x2="23" y2="6"></line><line x1="23" y1="26" x2="23" y2="22"></line><line x1="26" y1="22" x2="20" y2="22"></line><line x1="16" y1="26" x2="16" y2="14"></line><line x1="16" y1="10" x2="16" y2="6"></line><line x1="13" y1="10" x2="19" y2="10"></line></svg>
          <span>Settings</span>
        </a>
			</li>

			<li class="cd-3d-nav__item">
				<a href="#0">
          <svg aria-hidden="true" class="icon icon--md"><g stroke="currentColor" stroke-width="2" fill="none"><polyline points="13 6 2 6 2 30 26 30 26 19"></polyline> <polygon points="16 20 10 22 12 16 26 2 30 6 16 20"></polygon><line x1="22" y1="6" x2="26" y2="10"></line></svg>
          <span>New</span>
        </a>
			</li>
		</ul>

		<span class="cd-3d-nav__marker cd-3d-nav__marker--col-1" aria-hidden="true"></span>	
	</nav>
    <script src="../assets/js/rotating_nav_anim.js"></script>
</body>
</html>

